<template>
  <NDataTable
    v-model:checked-row-keys="checkedRowKeys"
    v-bind="pick(props.option, Object.keys(dataTableProps)) as any"
    :loading
    :data="props.data"
    :columns="props.columns"
    :pagination="props.pagination"
    class="nv-data-table"
    @load="onLoad"
    @scroll="onScroll"
    @update:filters="props['onUpdate:filters']"
    @update:page="props['onUpdate:page']"
    @update:page-size="props['onUpdate:pageSize']"
    @update:sorter="props['onUpdate:sorter']"
  >
    <template v-if="slots.table_loading" #loading>
      <slot name="table_loading" />
    </template>
    <template v-if="slots.table_empty" #empty>
      <slot name="table_empty" />
    </template>
  </NDataTable>
</template>

<script setup lang="tsx">
import type { DataTableRowKey } from 'naive-ui'
import type { NvDataTableProps, NvDataTableSlots } from './types'
import { pick } from 'lodash-es'
import { dataTableProps, NDataTable } from 'naive-ui'

const props = defineProps<NvDataTableProps>()
const slots = defineSlots<NvDataTableSlots>()

const loading = defineModel<boolean>('loading', { required: true })
const checkedRowKeys = defineModel<DataTableRowKey[]>('checkedRowKeys', { required: true })
</script>

<style lang="scss">
.n-ellipsis {
  width: 100%;
}
</style>
